<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>SuperSlide - 文字无缝滚动-上</title>

	<!-- 1.0 引入jQuery.js 和 jquery.SuperSlide.js -->
	<script type="text/javascript" src="js/jquery1.42.min.js"></script>
	<script type="text/javascript" src="js/jquery.SuperSlide.2.1.1.js"></script>

	<!-- 2.0 编写CSS，为HTML赋予样色 -->
	<style type="text/css">

		/* css 重置 */
		*{margin:0; padding:0; list-style:none; }
		body{ background:#fff; font:normal 12px/22px 宋体;  }
		img{ border:0;  }
		a{ text-decoration:none; color:#333;  }
		a:hover{ color:#1974A1;  }


		/* 本例子css */
		.txtMarquee-top{ width:450px;  overflow:hidden; position:relative;  border:1px solid #ccc;   }
		.txtMarquee-top .hd{ overflow:hidden;  height:30px; background:#f4f4f4; padding:0 10px;  }
		.txtMarquee-top .hd .prev,.txtMarquee-top .hd .next{ display:block;  width:9px; height:5px; float:right; margin-right:5px; margin-top:10px;  overflow:hidden;
			 cursor:pointer; background:url("images/arrow.png") 0 -100px no-repeat;}
		.txtMarquee-top .hd .next{ background-position:0 -140px;  }
		.txtMarquee-top .hd .prevStop{ background-position:-60px -100px;  }
		.txtMarquee-top .hd .nextStop{ background-position:-60px -140px;  }
		.txtMarquee-top .bd{ padding:15px;  }
		.txtMarquee-top .infoList li{ height:24px; line-height:24px;   }
		.txtMarquee-top .infoList li .date{ float:right; color:#999;  }
	</style>


</head>
<body>
	<!-- 3.0 编写HTML -->
	<div class="txtMarquee-top">

		<div class="hd">
			<a class="next"></a>
			<a class="prev"></a>
		</div>

		<div class="bd">
			<ul class="infoList">
				<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">中国打破了世界软件巨头规则</a></li>
				<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">口语：会说中文就能说英语！</a></li>
				<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">农场摘菜不如在线学外语好玩</a></li>
				<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">数理化老师竟也看学习资料？</a></li>
				<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">学英语送ipad2,45天突破听说</a></li>
				<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">学外语，上北外！</a></li>
				<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">那些无法理解的荒唐事</a></li>
			</ul>
		</div>
	</div>


</body>

	<!-- 4.0 初始化：调用SuperSlide -->
	<script type="text/javascript">
		jQuery(".txtMarquee-top").slide({mainCell:".bd ul",autoPlay:true,effect:"topMarquee",vis:5,interTime:50,pnLoop:false,trigger:"click"});
	</script>


</html>